<template>
  <view class="friendRequstLayout">
    <view class="friendRequst">
      <scroll-view scroll-y class="friendRequstScroll" :show-scrollbar="false">
        <view class="scroll-content">
          <view class="scroll-item" v-for="(item, index) in itemStatus">
            <view class="show" @click="showOperation(item)">
              <view class="avatar">
                <image :src="item.source.img" mode="widthFix" />
              </view>
              <view class="name-msg">
                <view class="name">
                  {{ item.source.sender == my.user._id ? item.friendNickname : item.source.username }}
                </view>
                <view class="msg">{{ item.source.sender == my.user._id ? "我: " : '' }} {{ item.source.message }}</view>
              </view>
            </view>
            <view class="operation" :style="[itemStatus[index].display, `height:${itemStatus[index].height}rpx;`]">
              <button class="agree" @click="btnClick(item, 'agree')"
                v-if="!(item.source.sender == my.user._id)">同意</button>
              <button class="refuse" @click="btnClick(item, 'refuse')"
                v-if="!(item.source.sender == my.user._id)">拒绝</button>
              <button class="always-refuse" @click="btnClick(item, 'always_refuse')"
                v-if="!(item.source.sender == my.user._id)">
                拒绝并禁止再次申请
              </button>
              <button class="wait" v-if="item.source.sender == my.user._id" disabled="false">
                等待对方同意
              </button>
            </view>
          </view>
          <view class=" title" v-if="itemStatus_already.length">已操作</view>
          <view class="scroll-item" v-for="(item, index) in itemStatus_already">
            <view class="show" @click="showOperation(item)">
              <view class="avatar">
                <image :src="item.source.img" mode="widthFix" />
              </view>
              <view class="name-msg">
                <view class="name"> {{ item.source.sender == my.user._id ? item.friendNickname : item.source.username }}
                </view>
                <view class="msg">{{ item.source.sender == my.user._id ? "我: " : '' }} {{ item.source.message }}
                </view>
              </view>
            </view>
            <view class="operation" :style="[item.display, `height:${item.height}rpx;`]">
              <button class="agree" :disabled="true" v-if="!(item.source.sender == my.user._id)">同意</button>
              <button class="refuse" :disabled="(item.status == 2)" v-if="!(item.source.sender == my.user._id)"
                @click="btnClick(item, 'refuse_a')">拒绝</button>
              <button class="always-refuse" :disabled="!(item.status == 2)" v-if="!(item.source.sender == my.user._id)"
                @click="btnClick(item, 'always_refuse_a')">禁止再次申请</button>
              <button class="wait" v-if="item.source.sender == my.user._id" disabled="false">
                {{ item.status == 2 ? "对方已拒绝" : "对方已拒绝并且禁止再次申请" }}
              </button>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from "vue";
import gsap from "gsap";
import { getFriendReq, agreeMakeFriend, rejectMakeFriend, getNumForMakeFriend } from "../../api/friendRequest"
import { onLoad, onShow } from "@dcloudio/uni-app";
import { useUserStore } from "../../store/modules/user"
import { FG } from '../../api/req.js'
let my = useUserStore()
let itemStatus = reactive([])
let itemStatus_already = reactive([])


function showOperation(item) {
  if (!item.animEnd) return
  item.animEnd = false;
  item.open = !item.open;
  if (item.open) {
    item.display = "display:flex;";
    gsap.to(item, {
      height: 100,
      duration: 0.5, // 动画持续时间
      roundProps: "value", // 确保数字四舍五入
      ease: "power2.out", // 动画缓动效果
      onUpdate: function () {
        // 在每一帧更新时执行的回调函数
        // 这里可以更新DOM元素或其他逻辑
      },
      onComplete: function () {
        // 动画完成时的回调函数
        item.animEnd = true;
      },
    })
  } else {
    gsap.to(item, {
      height: 0,
      duration: 0.5, // 动画持续时间
      roundProps: "value", // 确保数字四舍五入
      ease: "power2.out", // 动画缓动效果
      onUpdate: function () {
        // 在每一帧更新时执行的回调函数
        // 这里可以更新DOM元素或其他逻辑
      },
      onComplete: function () {
        // 动画完成时的回调函数
        item.display = "display:none;";
        item.animEnd = true;
      },
    })
  }
}

onLoad(async () => {
  uni.showLoading({
    mask: true,
  })
  uni.setNavigationBarTitle({
    title: '新朋友',
  })
  if (!my.user?._id) {
    let user = uni.getStorageSync('user')
    if (user) {
      my.user = user
    } else {
      uni.navigateTo({ url: '/pages/login/login' })
    }
  }
  await getNumForMakeFriend({ isclear: true, uid: my.user._id })
})
onShow(async () => {
  if (!my.user._id) return uni.switchTab({ url: '/pages/chatList/chatList' })
  try {
    let res = await getFriendReq({ uid: my.user._id })
    if (res.status == 200) {
      itemStatus.splice(0, itemStatus.length)
      itemStatus_already.splice(0, itemStatus_already.length)
      res.data.forEach((item, index) => {
        let status = { open: false, height: 0, display: "display:none;", animEnd: true }
        let obj = {
          ...item,
          ...status
        }
        obj.source.img = `${FG.baseUrl}/static/${obj.source.img}`
        switch (+obj.status) {
          case 0:
            itemStatus.push(obj)
            break
          default:
            itemStatus_already.push(obj)
        }
      })
    }
  }
  catch (error) {
    console.log(error);
  }
  uni.hideLoading()
})

async function btnClick(item, param) {
  console.log(item, param);
  switch (param) {
    case "agree":
      {
        uni.navigateTo({ url: `/pages/agreeMakeFriend/agreeMakeFriend?id=${item.source.sender}&msg=${item.source.message}` })
        break
      }
    case "refuse":
      {
        let req = {
          uid: my.user._id,
          fid: item.source.sender,
          allow: true
        }
        let back = await rejectMakeFriend(req)
        if (back.status == 200) {
          let index = itemStatus.findIndex(x => x._id == item._id)
          itemStatus.splice(index, 1)
          item.status = "2"
          itemStatus_already.unshift(item)
          uni.showToast({
            title: "操作成功",
            icon: "success",
            duration: 1000,
            mask: true
          })
        }
        break
      }
    case "always_refuse":
      {
        let reqAlwaysRefuse = {
          uid: my.user._id,
          fid: item.source.sender,
          allow: false
        }
        let backAlwaysRefuse = await rejectMakeFriend(reqAlwaysRefuse)
        if (backAlwaysRefuse.status == 200) {
          let index = itemStatus.findIndex(x => x._id == item._id)
          itemStatus.splice(index, 1)
          item.status = "3"
          itemStatus_already.unshift(item)
          uni.showToast({
            title: "操作成功",
            icon: "success",
            duration: 1000,
            mask: true
          })
        }
        break
      }
    case "refuse_a":
      {
        let req = {
          uid: my.user._id,
          fid: item.source.sender,
          allow: true
        }
        let back = await rejectMakeFriend(req)
        if (back.status == 200) {
          item.status = "2"
          uni.showToast({
            title: "操作成功",
            icon: "success",
            duration: 1000,
            mask: true
          })
        }
        break
      }
    case "always_refuse_a":
      {
        let reqAlwaysRefuse = {
          uid: my.user._id,
          fid: item.source.sender,
          allow: false
        }
        let backAlwaysRefuse = await rejectMakeFriend(reqAlwaysRefuse)
        if (backAlwaysRefuse.status == 200) {
          item.status = "3"
          uni.showToast({
            title: "操作成功",
            icon: "success",
            duration: 1000,
            mask: true
          })
        }
        break
      }
  }
}

</script>

<style lang="scss" scoped>
.friendRequstLayout {
  width: 100%;
  height: calc(100vh - 44px - env(safe-area-inset-top));
  overflow: hidden;

  .friendRequst {
    width: 100%;
    height: 100%;

    .friendRequstScroll {
      width: 100%;
      height: 100%;

      .scroll-content {
        width: 100%;

        .scroll-item {
          width: 100%;
          display: flex;

          border-bottom: 1px solid #eee;
          flex-direction: column;

          .show {
            width: 100%;
            height: 120rpx;
            display: flex;
            align-items: center;
            padding: 10rpx;

            &:active {
              background-color: #eee;
            }

            .avatar {
              width: 13%;
              display: flex;
              align-items: center;
              margin-right: 20rpx;

              image {
                width: 100%;
              }
            }

            .name-msg {
              max-width: 80%;

              .name,
              .msg {
                overflow: hidden;
                text-wrap: nowrap;
                text-overflow: ellipsis;
              }

              .msg {
                margin-top: 10rpx;
                font-size: 24rpx;
                color: #666;
              }
            }
          }

          .operation {
            display: flex;
            height: 0rpx; //80rpx
            display: none;
            align-items: center;
            justify-content: space-around;

            button {
              height: 60%;
              font-size: 24rpx;
            }

            .wait {
              width: 70%;
              height: 70%;
            }
          }
        }

        .title {
          width: 100%;
          height: 100rpx;
          padding: 20rpx 10rpx;
          background-color: #eee;
          line-height: calc(100rpx - 40rpx);
          color: #666;
        }
      }
    }
  }
}
</style>